<script setup lang="ts">
import {  computed, ref } from 'vue';
import CustomPassword from './components/password.vue'
import CustomMobile from './components/mobile.vue'


//1.标签切换
const tabMetas = [
  {
    title: '密码登录',
    subTitle: '验证码登录'
  },
  {
    title: '验证码登录',
    subTitle: '密码登录'
  }
]

const tabIndex = ref(0)
const tabMeta = computed(() => {
  return tabMetas[tabIndex.value]
})

const changeTabMeta = () => {
  tabIndex.value=Math.abs(tabIndex.value-1)
}


defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })



</script>


<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMeta.title }}</view>
      <view class="type">
        <text @click="changeTabMeta">{{ tabMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
  </view>

    <!-- 密码登录 -->
    <CustomPassword v-if="tabIndex === 0" />
    <!-- 验证码登录 -->
    <CustomMobile v-else />


  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>